<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <!-- 第三步 使用组件 -->
    <!-- <Home></Home> -->
    <!-- <News></News> -->
<!-- 添加点击按钮切换路由 -->
   <ul>
     <li>
       <router-link to="/books">books</router-link>
     </li>
     <li>
       <router-link to="/playing">playing</router-link>
     </li>
     <li>
       <router-link to="/list">list</router-link>
     </li>
       <li>
       <router-link to="/sports/100/zs">sports</router-link>
     </li>
   </ul>



    <!-- 使用路由站位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
//  第一步 引入组件

// import  myhome  from './views/home/home.vue'
import Home from "./views/home/home";
import News from "./views/news/news";
export default {
  name: "App",
  components: {
    // 第二步 挂载组件
    // Home:myhome
    Home,
    News,
  },
};
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

ul   {
  list-style: none;
  display: flex;
  justify-content: space-around;
}
a {
  text-decoration: none;
}

/* .router-link-active
.active {
  color: red;
} */
.router-link-active {
  color: red;
}
</style>
